<!-- 课程列表 -->
<template>
	<!-- 不能用v-if (i: 每个tab页的专属下标;  index: 当前tab的下标; 申明在 MescrollMoreItemMixin )-->
	<view v-show="i === index">
		<!-- downBars 子组件开始传值 -->
		<down-bar :params="params" :downBars="downBars"    @search="search"></down-bar>
		<!-- top="120"下拉布局往下偏移,防止被悬浮菜单遮住 -->
		<!-- ref动态生成: 字节跳动小程序编辑器不支持一个页面存在相同的ref (如不考虑字节跳动小程序可固定值为 ref="mescrollRef") -->
		<!-- top="120"  删掉 -->
		<!-- @init="mescrollInit"  这个是否第一次自动触发 -->
		<mescroll-body :ref="'mescrollRef'+i"   :down="downOption" @down="downCallback" :up="upOption" @up="upCallback">
			<!-- 数据列表 -->
			<view style="padding:0 30rpx">
				<course-item v-for="(item,index) in list " :key="index"  :item="item"></course-item>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	// 导入混合文件
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import MescrollMoreItemMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mixins/mescroll-more-item.js";
	// 导入混合文件
	import downBar from './down-bar.vue'
	//导入config 里面coures.js
	import downBars from '@/config/course.js'
	//导入公共组件的course-item 
	import courseItem from '@/components/common/course-item.vue'
	
	import api from  '@/api/course.js'
	export  default {
		mixins: [MescrollMixin,MescrollMoreItemMixin], // 注意此处还需使用MescrollMoreItemMixin (必须写在MescrollMixin后面)	
		components:{downBar,courseItem},
		props:{
				params:{
					type:Object,
					default:()=>{}
				},
				content:{
					type:String,
					default:''
				},
				//  注意：（i参数）  兼容支付包和小程序的
				i: Number, // 每个tab页的专属下标 (除了支付宝小程序必须在这里定义, 其他平台都可不用写, 因为已在MescrollMoreItemMixin定义)
				index: { // 当前tab的下标 (除了支付宝小程序必须在这里定义, 其他平台都可不用写, 因为已在MescrollMoreItemMixin定义)
					type: Number,
					default(){
						return 0
					}
				},
			
		},
		data(){
			return {
				upOption:{
					auto:false, // 不自动加载
					//noMoreSize 是为了显示数据 提示框  -----END---- 没有更多了
					noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
				},
				downBars:downBars() , // /config/course.js  导出了一个方法
				
				searchData:{ //封装搜索条件
					content:null,  //关键字内容
					sort:null,  //排序类型  （new 最新 hot 热门）
					isFree:null,  //0 付费  1免费
					labelId:null,  //标签id 
					categoryId:null,//分类id
				},
				list:[]
				
			}
		},
		created() {
			// console.log(this.params,'course-list')
		},
		mounted() {
				//如果有其他页面带的请求参数 则获取对应的请求参数值，将参数值与this.searchData合并
				this.params  &&  Object.keys(this.searchData).forEach((key)=>{
		this.searchData[key] = (this.params[key] || this.params[key] === 0 ) ? this.params[key] : null
				  // 注意 this.params 如果有值 就直接返回 如果是等于0情况下 也返回   否则 为 空
				})
				console.log('mounted合并的searchData',this.searchData)
		},
		methods:{
		
			
			//搜索  (data就是查询条件)
			search(data){
				//查询逻辑
				
				// trim()  去掉左右空格   合并关键字内容 去掉左右空格
				this.searchData.content = this.content && this.content.trim()
				//合并数据 ,data中的属性会合并到this.serachData 对象 属性值上
				//对象拷贝合并Object.assign
				Object.assign(this.searchData,data)
				
				
				this.mescroll.resetUpScroll()//调用上拉的回调  也就是他mescroll 底层代码重新在调用一次upCallback()
			},
			//上拉加载的回调 你  （下拉也会调用此方法，page.num = 1 ）
	async	upCallback(page){
				// console.log('课程列表的upCallback',page.num,page.size,this.searchData)
				
				// 根据分页条件查询列表数据
				const {data } = await	 api.getList(this.searchData,page.num,page.size)
				//注意是声明的常量  list 
				const currList = data.records
				
				//第一次家加载(下拉刷新)
				if(page.num === 1 ){
					this.list =  [] 
					//回到顶部 (举例顶部位置，市场毫秒数)
					this.mescroll.scrollTo(0,0,)
				}
				
				//追加新数据concat 合并数组
				this.list = this.list.concat(currList)
				
				//请求成功 隐藏加摘状态
				this.mescroll.endBySize(currList.length,data.total)
			},
			
		}
	}
</script>

<style>
</style>
